<template>
  <div class="container">
    <h1 class="text-[#4d5562] dark:text-[#9da3ae]">距离元旦还剩下</h1>
    <div class="number-list">
      <div class="item">
        <div class="number" data-number="00">
          <div class="cur top"><span>00</span></div>
          <div class="cur bottom"><span>0z0</span></div>
          <div class="next top"><span>00</span></div>
          <div class="next bottom"><span>00</span></div>
        </div>
        <div class="label">DAYS</div>
      </div>
      <div class="item">
        <div class="number" data-number="00">
          <div class="cur top"><span>00</span></div>
          <div class="cur bottom"><span>00</span></div>
          <div class="next top"><span>00</span></div>
          <div class="next bottom"><span>00</span></div>
        </div>
        <div class="label">HOURS</div>
      </div>
      <div class="item">
        <div class="number" data-number="00">
          <div class="cur top"><span>00</span></div>
          <div class="cur bottom"><span>00</span></div>
          <div class="next top"><span>00</span></div>
          <div class="next bottom"><span>00</span></div>
        </div>
        <div class="label">MINS</div>
      </div>
      <div class="item">
        <div class="number" data-number="00">
          <div class="cur top"><span>00</span></div>
          <div class="cur bottom"><span>00</span></div>
          <div class="next top"><span>00</span></div>
          <div class="next bottom"><span>00</span></div>
        </div>
        <div class="label">SECS</div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 倒计时目标日期
const targetDate = new Date(new Date().getFullYear() + 1, 0, 1) // 元旦
// 更新倒计时的函数
function updateCountdown() {
  const now = new Date()
  const diff = Math.max(0, targetDate - now) // 剩余毫秒数

  const seconds = Math.floor(diff / 1000) % 60
  const minutes = Math.floor(diff / (1000 * 60)) % 60
  const hours = Math.floor(diff / (1000 * 60 * 60)) % 24
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))

  const values = [days, hours, minutes, seconds]

  document.querySelectorAll('.item').forEach((item, index) => {
    const numberElement = item.querySelector('.number')
    const current = numberElement.dataset.number
    const newValue = values[index].toString().padStart(2, '0')
    if (current !== newValue) {
      flipNumber(numberElement, newValue)
    }
  })
}

// 翻页动画的函数
function flipNumber(element, newValue) {
  const currentTop = element.querySelector('.cur.top span')
  const currentBottom = element.querySelector('.cur.bottom span')
  const nextTop = element.querySelector('.next.top span')
  const nextBottom = element.querySelector('.next.bottom span')

  // 设置下一值
  nextTop.textContent = newValue
  nextBottom.textContent = newValue

  // 添加翻页类
  element.classList.add('flip')

  // 等动画结束后更新当前值
  setTimeout(() => {
    currentTop.textContent = newValue
    currentBottom.textContent = newValue
    element.dataset.number = newValue

    // 移除翻页类
    element.classList.remove('flip')
  }, 800)
}

// 初始化
updateCountdown()
setInterval(updateCountdown, 1000)
</script>
<style scoped>
.container {
  width: 100%;
  height: 240px;
  border-radius: 8px;
  text-align: center;
}

.container h1 {
  margin-bottom: 20px;
  font-weight: 600;
}

.number-list {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.number {
  background: linear-gradient(to bottom, #4b5563, #6b7280);
  color: #e5e7eb;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  border-radius: 6px;
  position: relative;
  font-family: 'Arial Rounded MT Bold', Arial, sans-serif;
  perspective: 200px;
}
.label {
  font-size: 20px;
  color: #d1d5db;
  text-shadow: 1px 1px 3px #000;
  margin-top: 10px;
}
.number::before,
.number::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background: #1f2937;
  left: 0;
  top: 50%;
  margin-top: -1px;
  z-index: 99;
}
.number::after {
  content: '';
  margin-top: 0;
  background: #e5e7eb;
}

.cur,
.next {
  height: 50%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  backface-visibility: hidden;
  transition: all 1s ease;
}

.bottom {
  top: 50%;
}
.bottom span {
  margin-top: -50px;
  display: block;
}

.cur.top {
  z-index: 5;
}
.cur.bottom {
  z-index: 1;
}
.next.top {
  z-index: 2;
}
.next.bottom {
  z-index: 4;
}

.bottom {
  transform-origin: center top;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(to bottom, #6b7280, #9ca3af);
}
.top {
  transform-origin: center bottom;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(to bottom, #4b5563, #6b7280);
}

.next.bottom {
  transform: rotateX(180deg);
}

.flip .cur.top {
  transform: rotateX(-180deg);
}
.flip .next.bottom {
  transform: rotateX(0deg);
}
</style>
